<template>
  <view>
    <!-- #ifdef APP-PLUS-->
    <u-sticky offset-top="0">
    <!-- #endif -->
      <!-- #ifdef H5 -->
      <u-sticky offset-top="-44">
      <!-- #endif -->
        <view :style="{ height: tops + 'px' }" style="width: 100%;background:#fff"></view>
        <view class="comment_top">
          <view class="left" @click="toBack">
            <u-icon name="arrow-left" size="20" color="#000"></u-icon>
          </view>
          <view class="userInfo" @click="toMypage(detail)">
            <u--image :src="detail?.user_info?.avatar" width="70rpx" height="70rpx" radius="50%">
              <template #error class="flex-center-center">
                <view class="ic-error">
                  <u-icon name="photo" size="20"></u-icon>
                </view>
              </template>
            </u--image>
            <view class="nickname">
              <view>
                {{ detail?.user_info?.nickname }}
              </view>
              <view class="user_tags">
                <image v-if="detail?.user_info?.app_user_tag=='official'"
                  src="https://ossresource.miyingbl.com/uploads/20240308/072661a99870e1fcfba1d1df6d8ddd35.png"></image>
                <image v-if="detail?.user_info?.app_user_tag=='doctor'"
                  src="https://ossresource.miyingbl.com/uploads/20240308/dbb99ae497e429ae87f740fb0f64a57f.png"></image>
                <text class="u-line-1 "
                  v-if="!(detail?.identity_status_name=='未知'||detail?.identity_status_name=='其他')">{{detail?.identity_status_name||forMatStatus(detail?.identity_status)}}</text>
              </view>
            </view>
          </view>

          <view v-show="userInfo?.uid !== detail?.uid">
            <view class="w_flw_btn" v-if="detail?.is_follow == 1" @click="toFollow(detail)">已关注</view>
            <view class="flw_btn" v-else @click="toFollow(detail)">关注</view>
          </view>
          <!-- <view style="margin-right: 30rpx" @click="toDetail">
            <u-icon name="https://ossresource.miyingbl.com/def/cc2ee202405241442129212.png" size="20"
              color="#333"></u-icon>
          </view> -->
        </view>
      </u-sticky>
      <scroll-view scroll-y="true">
        <view style="border-bottom: 10rpx solid #f6f6f6"></view>

        <view class="pages" id="comm_box">
          <view class="item_list">
            <!-- <view class="item_list_t" v-show="commScroll"></view> -->
            <view class="item_list_c">
              <view class="kepu_title">
                {{ detail?.title }}
              </view>
              <!--  <view v-if="detail?.type==1">
                <image :src="detail?.content"
                       mode="widthFix"
                       style='width:100%'
                       @load="imageLoad"></image>
              </view> -->
              <view>
                <u-parse :previewImg="false" :content="detail?.content" :showImgMenu="false" :selectable="false"
                  :lazyLoad="true" @ready="parseReady"></u-parse>
              </view>

            </view>

            <!--<view class="scroll-content" v-if="detail?.post_type==1">
       					<video id="myVideo" v-for="(image, i) in detail?.image" :src="image" :key="i" @error="videoErrorCallback" controls></video>
       				</view>-->
            <view class="time">{{formatDate(detail?.create_time,'MM-DD HH:mm')}} <text class="address"
                v-if="detail?.province">{{detail?.province||''}}</text></view>
          </view>
        </view>

        <view class="pages" id="commentListBox">
          <!-- 评论 -->
          <view class="comm_box">
            <view class="all" v-if="commentList?.length > 0">热门评论({{detail?.comment_number?detail?.comment_number:0}})
            </view>
            <view class="comment_boxc_more" v-if="commentList?.length == 0">
              <image src="https://ossresource.miyingbl.com/def/a7eed202405231608191269.png" class='empty_image'></image>
              <view class="u-p-t-20">
                暂无评论，快来发表你的评论吧
              </view>
            </view>
            <view class="comment" v-for="(item, index) in commentList" :key="index" @click="toCommenta(item, index)"
              v-show="index<5">
              <view class="comment_box">
                <view class="comment_head">
                  <view class="comment_head_l"
                    @click.stop="toMypage(item)">
                    <u--image :src="item.avatar" width="62rpx" height="62rpx" radius="50%">

                      <template #error class="flex-center-center">
                        <view class="ic-error">
                          <u-icon name="photo" size="20"></u-icon>
                        </view>
                      </template>
                    </u--image>
                  </view>
                  <!-- 一级回复 -->
                  <view class="comment_head_r commentBorder" style="padding-bottom: 10rpx;">
                    <view class="comment_nickname">
                      <view class="comment_head_r_name">
                        <view class="text-overflow-ep">{{ item?.nickname || '匿名用户' }}</view>
                        <view class="user_tags">
                          <image v-if="item?.app_user_tag=='official'"
                            src="https://ossresource.miyingbl.com/uploads/20240308/072661a99870e1fcfba1d1df6d8ddd35.png">
                          </image>
                          <image v-if="item?.app_user_tag=='doctor'"
                            src="https://ossresource.miyingbl.com/uploads/20240308/dbb99ae497e429ae87f740fb0f64a57f.png">
                          </image>
                          <text class="u-line-1 "
                            v-if="!(item?.identity_status_name=='未知'||item?.identity_status_name=='其他')">{{item?.identity_status_name||forMatStatus(item?.identity_status)}}</text>
                        </view>
                      </view>
                      <!-- 点赞图标 -->
                      <view class="comment_box_zan" @click.stop="praise(item)">
                        <image src="https://ossresource.miyingbl.com/def/9f361202405231506404750.png" class="icons"
                          v-if="item.is_like == 1"></image>
                        <image src="https://ossresource.miyingbl.com/def/29cbd202405231506398795.png" class="icons" v-else>
                        </image>
                        <view class="comment_box_zan_num">
                          {{ item.like_num ? item.like_num : 0 }}
                        </view>
                      </view>
                    </view>
                    <view class="comment_ct_r_text" @longpress="longpressCommenta(item, index,commentList)"
                      @touchend="touchendCommenta">{{ item?.comment || '' }}</view>
                    <view class="comment_ct_r_time">
                      {{ item?.create_times || '' }}<text class="address"> {{item?.province}}</text>
                      <text>回复</text>
                    </view>

                    <view class="comment_boxc" v-for="(items, indexs) in item?.children" :key="indexs"
                      v-show="item?.children && indexs < 2" @click.stop="toCommentb(items, index, false, indexs)">
                      <view class="comment_head">
                        <view class="comment_head_l"
                          @click.stop="toMypage(items)">
                          <u--image :src="items.avatar" width="62rpx" height="62rpx" radius="50%">

                            <template #error class="flex-center-center">
                              <view class="ic-error">
                                <u-icon name="photo" size="20"></u-icon>
                              </view>
                            </template>
                          </u--image>
                        </view>
                        <!-- 二级回复 -->
                        <view class="comment_head_r">
                          <view class="comment_nickname">
                            <view class="comment_head_r_name">
                              <text class="text-overflow-ep">{{ items.nickname || '匿名用户'
                                                                 }}</text>
                              <view class="user_tags">
                                <image v-if="items?.app_user_tag=='official'"
                                  src="https://ossresource.miyingbl.com/uploads/20240308/072661a99870e1fcfba1d1df6d8ddd35.png">
                                </image>
                                <image v-if="items?.app_user_tag=='doctor'"
                                  src="https://ossresource.miyingbl.com/uploads/20240308/dbb99ae497e429ae87f740fb0f64a57f.png">
                                </image>
                                <text class="u-line-1 "
                                  v-if="!(items?.identity_status_name=='未知'||items?.identity_status_name=='其他')">{{items?.identity_status_name||forMatStatus(items?.identity_status)}}</text>
                              </view>
                            </view>
                            <view class="comment_box_zan" @click.stop="praise(items)">
                              <image src="https://ossresource.miyingbl.com/def/9f361202405231506404750.png" class="icons"
                                v-if="items.is_like == 1"></image>
                              <image src="https://ossresource.miyingbl.com/def/29cbd202405231506398795.png" class="icons" v-else>
                              </image>
                              <view class="comment_box_zan_num">
                                {{ items.like_num ? items.like_num : 0 }}
                              </view>
                            </view>
                          </view>
                          <view class="comment_ct_r_text" @longpress="longpressCommenta(items, indexs,item.children)"
                            @touchend="touchendCommenta"><text v-if="items?.to_nickname">回复<text
                                style="color:#969696;padding-left:10rpx">{{items?.to_nickname}}：</text></text>{{ items?.comment || '' }}
                          </view>
                          <view class="comment_ct_r_time">{{ items?.create_times || '' }} <text class="address">
                              {{item?.province}}</text>
                            <text>回复</text>
                          </view>
                        </view>
                      </view>
                    </view>
                    <view class="comment_boxc" v-for="(items, indexs) in item.children" :key="indexs"
                      v-show="indexs >= 2 && item.show" @click.stop="toCommentb(items, index, false, indexs)">
                      <view class="comment_head">
                        <view class="comment_head_l"
                          @click.stop="toMypage(items)">
                          <u--image :src="items.avatar" width="62rpx" height="62rpx" radius="50%">

                            <template #error class="flex-center-center">
                              <view class="ic-error">
                                <u-icon name="photo" size="20"></u-icon>
                              </view>
                            </template>
                          </u--image>
                        </view>
                        <view class="comment_head_r">

                          <view class="comment_nickname">
                            <view class="comment_head_r_name">
                              <text class="text-overflow-ep">{{ items.nickname || '匿名用户'}}</text>
                              <view class="user_tags">
                                <image v-if="items?.app_user_tag=='official'"
                                  src="https://ossresource.miyingbl.com/uploads/20240308/072661a99870e1fcfba1d1df6d8ddd35.png">
                                </image>
                                <image v-if="items?.app_user_tag=='doctor'"
                                  src="https://ossresource.miyingbl.com/uploads/20240308/dbb99ae497e429ae87f740fb0f64a57f.png">
                                </image>
                                <text class="u-line-1 "
                                  v-if="items?.identity_status_name!='未知'">{{items?.identity_status_name||forMatStatus(items?.identity_status)}}</text>
                              </view>
                            </view>
                            <view class="comment_box_zan" @click.stop="praise(items)">
                              <u-icon name="heart-fill" size="24" v-if="items?.is_like == 1" color="#00C1B9"></u-icon>
                              <u-icon name="heart" size="24" v-else></u-icon>
                              <view class="comment_box_zan_num">{{ items?.zan_number }}</view>
                            </view>
                          </view>
                          <view class="comment_ct_r_text" @longpress="longpressCommenta(items, indexs,item?.children)"
                            @touchend="touchendCommenta"><text v-if="items?.to_nickname">回复<text
                                style="color:#969696;padding-left:10rpx">{{items?.to_nickname}}：</text></text>{{ items?.comment || '' }}
                          </view>
                          <view class="comment_ct_r_time">{{ items?.create_times || '' }} <text class="address">
                              {{item.province}}</text>
                            <!-- <text>回复</text> -->
                          </view>
                        </view>
                      </view>

                    </view>
                    <view class="comment_boxc_more comment_boxc_more1" @click.stop="getMore(index)"
                      v-if="item.children && item.children.length > 2">
                      {{ item.show ? '收回' : '展开更多回复' }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="all_com_btn" v-if="detail?.comment_number > 5"
              @click="navigateTo('/baby/science/comment/index?id=' + detail.id)">
              查看全部{{ detail?.comment_number }}条评论
            </view>
          </view>
          <u-popup :show="fenShow" mode="bottom" @close="close" :round="10" :closeable="true" bgColor='#F6F6F6'>
            <view>
              <view class="fen_box_title">分享至</view>
              <view class="fen_box">
                <view class="fen_box_cen">
                  <button open-type="share" class="fen_box_cen_l" @click="toppicWxShare(detail)">
                    <image src="https://ossresource.miyingbl.com/uploads/20240307/1b8d3a17f569740d545b17facde7d718.png"
                      class="fen_box_cen_l_img"></image>
                    <view class="fen_box_cen_l_te">微信好友</view>
                  </button>
                  <button open-type="share" class="fen_box_cen_l" @click="toppicPyShare(detail)">
                    <image src="https://ossresource.miyingbl.com/uploads/20240307/9c488feb2f34a1588dd945dbcf5fec32.png"
                      class="fen_box_cen_l_img"></image>
                    <view class="fen_box_cen_l_te">朋友圈</view>
                  </button>
                </view>
                <view v-if="detail?.uid != userInfo?.uid">
                  <u-line></u-line>
                </view>
                <view class="fen_box_cen" v-if="detail?.uid != userInfo?.uid">
                  <button class="fen_box_cen_l" @click="lahei()">
                    <image src="https://ossresource.miyingbl.com/uploads/20240304/47f1b605729e5f10ac2f5bdf6a6d8817.png"
                      class="fen_box_cen_l_img"></image>
                    <view class="fen_box_cen_l_te">不喜欢</view>
                  </button>
                  <button class="fen_box_cen_l" @click="toReport">
                    <image src="https://ossresource.miyingbl.com/uploads/20240304/5b14bb94eae78c1a45d0d58b8fecc0d5.png"
                      class="fen_box_cen_l_img"></image>
                    <view class="fen_box_cen_l_te">举报</view>
                  </button>
                </view>
              </view>
            </view>

          </u-popup>
        </view>
        <!-- 精选推荐 -->
        <!-- <u-gap height="5"
               bgColor="#f6f6f6"></u-gap> -->
        <!-- <view>
          <view class="jxcontent">精选内容</view>
          <h-hot-list @updateList="updateList"
                      @deleteArticle="deleteArticle"
                      :list="recommendList"
                      @itemTap="gotoDetail"
                      :border="true"
                      @share="share"
                      @toLogin="showLogin"></h-hot-list>

          <h-loading :show="showLoading"
                     :showMore="recommendList?.length"></h-loading>
        </view> -->

        <view class="footerkong"></view>
        <view class="footer">
          <view class="footer_input" @click="toCom()">
            <u-icon name='edit-pen' size='20' color='999999'></u-icon> <text style="padding-left:10rpx;">我来评论</text>
          </view>
          <view class="footer_btn" @click="getHeight()">
            <image src="https://ossresource.miyingbl.com/def/bd0b5202405231502545151.png" class="icons"></image>
            <text class="u-p-l-10">{{ detail?.comment_number }}</text>
          </view>
          <view class="footer_btn" @click="onArticleOperate(detail,1)">
            <image src="https://ossresource.miyingbl.com/def/9f361202405231506404750.png" class="icons"
              v-if="detail?.is_like"></image>
            <image src="https://ossresource.miyingbl.com/def/29cbd202405231506398795.png" class="icons" v-else>
            </image>
            <text class="u-p-l-5">{{ detail?.zan_number }}</text>
          </view>
          <view class="footer_btn" @click="onArticleOperate(detail,2)">
            <image src="https://ossresource.miyingbl.com/def/2cb00202405231506423239.png" class="icons"
              v-if="detail.is_collect"></image>
            <image src="https://ossresource.miyingbl.com/def/7165b202405231506414059.png" class="icons" v-else>
            </image>
            <text class="u-p-l-5">{{ detail?.collect_number }}</text>
          </view>

        </view>
      </scroll-view>
  </view>

  <!-- <BottomComment @articleCommentInputFocus="articleCommentInputFocus" :detail='detail'></BottomComment> -->
  <!-- 评论输入框 -->
  <TextareaComment ref="textareaCommentRef" v-model:showInputPop="showInputPop" @closeInputPop="closeInputPop"
    @commentSuccess="commentSuccess" :detail='detail' :type="1">
  </TextareaComment>
  <h-login ref="login"></h-login>
  <!-- 分享 -->
  <h-share ref="shareRef" :showLh="true"></h-share>
  <!-- 拉黑 -->
  <u-popup :show="laheiShow" mode="bottom" @close="closeLafei" :round="10" :closeable="true" bgColor='#F6F6F6'>
    <view>
      <view class="fen_box">
        <view class="fen_box_cen">
          <view class="lh_box_cen_l" @click="negativeFeedback(1)">
            <image src="https://ossresource.miyingbl.com/uploads/20240307/f6b32f7b63ee1ecc427102897e0cde2c.png"
              class="fen_box_cen_l_img"></image>
            <view class="fen_box_cen_l_te">不感兴趣</view>
          </view>
          <view class="lh_box_cen_l" @click="defriend()">
            <image src="https://ossresource.miyingbl.com/uploads/20240307/5210aee89f7a4118171e4be748182b1f.png"
              class="fen_box_cen_l_img"></image>
            <view class="fen_box_cen_l_te">不喜欢作者</view>
          </view>
        </view>
      </view>
    </view>

  </u-popup>
</template>

<script setup lang="ts">
import {formatDate} from '@/utils/index'
  const laheiShow = ref(false)
  const closeLafei = () => {
    laheiShow.value = false
  }
  const lahei = () => {
    fenShow.value = false
    laheiShow.value = true
  }
  import { getHomeHotBottomListApi } from '@/services/my/user'
  import { ref, reactive, nextTick } from 'vue'
  import { cancelCollectPopularApi } from '@/api/baby'
  import {
    coupeDetails,
    collectPopularApi,
    kepuCommentListApi,
    kepulike,
    kepuComment,
    kepuCommentLike,
    kepuCommentDel,
  } from '@/api/kepu'
  import {
    onLoad,
    onPullDownRefresh,
    onReachBottom,
    onBackPress,
    onPageScroll,
    onReady,
    onShow,
  } from '@dcloudio/uni-app'
  import { useMemberStore, useSystemStore } from '@/stores'
  import { negativeFeedbackApi, blockUserApi } from '@/api/home'

  import { getCreateUser, coupeDetailsApi, coupeCommentsApi, followUserApi,articleOperateApi ,articleCommentAddApi,articleCommentLikeApi ,articleCommentDelApi} from '@/api/social'

  function forMatStatus(status) {
    let text = ''
    switch (status) {
      case 0:
        text = ''
        break
      case 1:
        text = '记经期'
        break
      case 2:
        text = '备孕中'
        break
      case 3:
        text = '怀孕中'
        break
      case 4:
        text = '宝宝已出生'
        break
      case 5:
        text = '未婚'
        break
      case 6:
        text = '准爸'
        break

      case 7:
        text = '爸爸'
        break
      case 8:
        text = '生产育儿'
        break
      case 9:
        text = '慢病'
        break
      case 10:
        text = ''
        break
    }
    return text
  }

  import { navigateTo, showToast } from '@/utils'
  import TextareaComment from '@/components/BottomComment/TextareaComment'

  const login = ref(null) // 登录组件实例
  import { checkMsg } from '@/api/baby'
  import UniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js'
  const toUser = ref('') //回复给谁
  var detail = ref({ link_url: [], content_type: 'kp' })
  const uniShare = new UniShare()
  var id = ref()
  var dyId = ref('')
  const tops = ref(0)
  const store = useMemberStore()
  const token = store?.token
  console.log(store?.userInfo)
  var userInfo = ref({})
  userInfo.value = store?.userInfo
  console.log(userInfo.value)
  var commentList = ref([])
  var scrollTop = ref(0)
  var commScroll = ref(false)
  var cenHeight = 0
  var commentShow = ref(false)
  var commShow = ref(false)
  var upIndex = 0
  var childIndex = 0
  var commentText = ref('')
  var commentPostText = ref('')
  var upRow = ref({})
  var child = ref({})
  var commonId = ref('')
  var isLoading = ref(false)
  var fenShow = ref(false)
  var trends_type = ref(null)
  const registrationID = ref('')
  onLoad(({ id, isCom, type }) => {
    getRecommend()
    addListener()
    id = id
    dyId.value = id
    commonId.value = id
    commScroll.value = isCom
    trends_type.value = type
    getDetail()
    let res = uni.getStorageSync('registerID')
    registrationID.value = res
  })

  onShow(() => {
    getCom()
  })

  onPullDownRefresh(() => {
    getRecommend()
    getDetail()
    getCom()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  })
  function addListener() {
    uni.$on('update_num', (row) => {
      const index = recommendList.value.findIndex((item) => item.id == row.id)
      const type = row.taptype == 'is_like' ? 'is_like' : 'is_collect'
      if (index != -1) {
        recommendList.value[index].zan_number = row.zan_number
        recommendList.value[index].is_like = row.is_like
        recommendList.value[index].is_collect = row.is_collect
        recommendList.value[index].comment_number = row.comment_number
      }
    })

    uni.$on('defriend', (row) => {
      const index = recommendList.value.findIndex((item) => item.id == row.id)
      if (index != -1) {
        recommendList.value.splice(index, 1)
      }
    })
  }
  onPageScroll(({ scrollTop }) => {
    if (scrollTop > 50) {
      commScroll.value = true
    } else {
      commScroll.value = false
    }
  })
  var is_ios = ref(false)
  uni.getSystemInfo({
    success: (e) => {
      is_ios.value = e.osName
    },
  })
  onReady(() => {
    uni.getSystemInfo({
      success: (e) => {
        console.log(e)
        tops.value = e.statusBarHeight
      },
    })
  })
  function toMypage(item) {
    if (item?.user_info?.app_user_tag||item?.app_user_tag) {
      let app_user_tag=item?.user_info?.app_user_tag||item?.app_user_tag
      if(item.uid == userStore?.userInfo.uid){
        navigateTo(`/pages-users/my-page/index?is_self=0&uid=${item?.uid}&type=kp&tag=${app_user_tag}`)
      }else {
        navigateTo(`/pages-users/my-page/official-doctor-home?is_self=0&uid=${item?.uid}&type=kp&tag=${app_user_tag}`)
      }
    } else {
      navigateTo(`/pages-users/my-page/other-index?is_self=0&uid=${item?.uid}&type=kp&tag=${app_user_tag}`)
    }
  }

  function toBack() {
    uni.$emit('view_num',detail.value)
    uni.navigateBack({
      delta: 1,
    })
  }

  function getMore(index) {
    commentList.value[index].show = !commentList.value[index].show
  }
  const toPersonal = (url, info) => {
    let is_self =
      userInfo.value.id ==
      info.uni.navigateTo({
        url: `/pages-users/my-page/index?is_self=${is_self}`,
      })
  }
  // 分享
  function toppicWxShare(row) {
    /* #ifdef H5 */
    uni.showToast({
      icon: 'error',
      title: '暂不支持分享',
    })
    /* #endif */
    /* #ifdef APP-PLUS */

    uni.share({
      provider: 'weixin',
      type: 0,
      scene: 'WXSceneSession',
      href: `https://weapptest.miyingbl.com/download/index.html?id=${row.id}&path=baby/science/index`,
      title: detail?.value.title,
      summary: detail?.value?.text_area || detail?.value.title || '咪婴伴侣',
      imageUrl: detail?.value.image,
      success: function (res) {
        uni.showToast({
          title: '分享成功',
          icon: 'success',
        })
        uni.hideLoading()
      },
      fail: function (err) {
        uni.showToast({
          title: '分享失败',
          icon: 'none',
          duration: 2000,
        })
        uni.hideLoading()
      },
    })
    /* #endif */
  }

  // 分享到朋友圈
  function toppicPyShare(row) {
    /* #ifdef H5 */
    uni.showToast({
      icon: 'error',
      title: '暂不支持分享',
    })
    /* #endif */
    /* #ifdef APP-PLUS */

    uni.share({
      provider: 'weixin',
      type: 0,
      scene: 'WXSceneTimeline',
      href: `https://a.app.qq.com/o/simple.jsp?pkgname=com.miyingbl.mybl&android_schema=mybl://baby/science/index?id=${row.id}&ios_schema=mybl://baby/science/index?id=${row.id}`,
      title: detail?.value.title,
      summary: detail?.value.title,
      imageUrl: detail?.value.image,
      success: function (res) {
        uni.showToast({
          title: '分享成功',
          icon: 'success',
        })
        uni.hideLoading()
      },
      fail: function (err) {
        uni.showToast({
          title: '分享失败',
          icon: 'none',
          duration: 2000,
        })
        uni.hideLoading()
      },
    })
    /* #endif */
  }

  // 打开分享
  function toDetail() {
    if (!store.token) return login.value.open()
    console.log('detail', detail.value);

    // fenShow.value = true
    detail.value.user_id=detail.value.uid
    detail.value.path = `baby/science/index?id=${detail.value?.id}`
    detail.value.content_type = 'kp'
    detail.value.imageUrl = detail.value?.thumbnail ||
      'https://ossresource.miyingbl.com/uploads/20240407/01ee3354aaba5358383f38331eec8fec.png'
    shareRef.value.open(detail.value)
  }

  // 负反馈
  const negativeFeedback = (tab) => {
    negativeFeedbackApi({
      id: detail.value.id,
      type: 2,
      tab,
    }).then((res) => {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
      laheiShow.value = false
      uni.$emit('defriend', detail.value)
    })
  }

  // 拉黑作者
  function defriend() {
    laheiShow.value = false
    uni.showModal({
      title: '温馨提示',
      content: '您确定要拉黑该用户吗？',
      showCancel: true,
      success: function (res) {
        if (res.confirm) {
          blockUserApi({ to_uid: detail.value.uid }).then((result) => {
            uni.setStorageSync('dle', detail.value.id)
            negativeFeedback(2)
            uni.showToast({
              title: result.msg,
              icon: 'success',
              duration: 1500,
              success: () => { },
            })
          })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      },
    })
  }

  function close() {
    commentShow.value = false
    commShow.value = false
    fenShow.value = false
  }
  const shareRef = ref(null)
  function share(item) {
    if (!token) {
      login.value.open()
      return
    }
    if (item.content_type == 'kp') {
      item.path = `baby/science/index?id=${item.id}`
      item.imageUrl =
        item?.thumbnail ||
        'https://ossresource.miyingbl.com/uploads/20240407/01ee3354aaba5358383f38331eec8fec.png'
    } else {
      item.summary = item?.content
      item.imageUrl =
        item?.thumbnail ||
        'https://ossresource.miyingbl.com/uploads/20240407/01ee3354aaba5358383f38331eec8fec.png'
      item.path = `social/detail/index?id=${item.id}`
    }
    shareRef.value.open(item)
  }

  function toCom() {
    if (!token) {
      login.value.open()
      return false
    } else {
      articleCommentInputFocus(1)
    }
  }

  function previewImg(list, index) {
    uni.previewImage({
      urls: list,
      current: index,
      fail: (err) => {
        console.log(err)
      },
    })
  }

  function toReport() {
    fenShow.value = false
    uni.navigateTo({
      url: '/pageT/report?id=' + dyId.value + '&type=7',
    })
  }

  async function toFollow(row) {
    if (!token) {
      login.value.open()
      return false
    }
    const res = await followUserApi({
      to_uid: row.uid,
    })
    if (row.is_follow == 1) {
      row.is_follow = 0
    } else {
      row.is_follow = 1
    }
    uni.showToast({
      title: res.message,
      icon: 'none',
    })
    uni.$emit('followUser', { uid: row.uid })
  }

  function videoErrorCallback(e) {
    uni.showModal({
      content: e.target.errMsg,
      showCancel: false,
    })
  }
  function getDetail(id) {
    coupeDetailsApi({
      article_id: dyId.value,
      type: 2
    }).then(res => {
      console.log(res)
      detail.value = res.data
      if (res?.data?.province) {
        let str = res?.data?.province
        if (str.slice(-1) == '省') {
          detail.value.province = str.slice(0, str.length - 1)
        }
      }
    })

  }
  function showLogin() {
    nextTick(() => {
      login.value.open()
    })
  }

  function getHeight() {
    uni
      .createSelectorQuery()
      .select('#comm_box')
      .boundingClientRect((rect) => {
        console.log(rect)
        var num = rect?.height
        cenHeight = num
        autoScroll(num)
      })
      .exec()
  }

  const parseReady = (e) => {
    if (commScroll.value) {
      getHeight()
    }
  }

  function imageLoad(e) {
    if (commScroll.value) {
      getHeight()
    }
  }
  function autoScroll(height) {
    uni.pageScrollTo({
      scrollTop: height,
      duration: 300,
    })
    scrollTop.value = height
  }

  function listScroll(e) {
    var num = Number(cenHeight) - 50
    if (e.detail.scrollTop > num) {
      commScroll.value = true
    } else {
      commScroll.value = false
    }
  }
  const params = ref({
    page: 1,
    limit: 10,
  })
  const finished = ref(false)
  const total = ref()
  const last_page = ref(0)
  async function getCom() {
    if (finished.value) return
    const ress = await coupeCommentsApi({
      id: dyId.value,
      type: 2,
      ...params.value,
    })
    commentList.value =
      params.value.page == 1 ? ress?.data?.data : commentList.value.concat(ress?.data?.data)
    total.value = ress?.data?.total
    last_page.value = ress?.data?.last_page
  }





  // 评论》点赞
  async function praise(row) {
    if (!token) {
      login.value.open()
      return false
    }
    const res = await articleCommentLikeApi({
      comment_id: row.id, //目标id
    })
    if (res.msg == '自己就不用给自己点赞了哈~') {
      // 给自己评论
      uni.showToast({
        title: res.message,
        icon: 'none',
      })
    } else {
      if (row.is_like == 1) {
        row.like_num--
        row.is_like = 0
        uni.showToast({
          title: res.message,
          icon: 'none',
        })
      } else {
        uni.showToast({
          title: res.message,
          icon: 'none',
        })
        row.like_num++
        row.is_like = 1
      }
    }
  }
// 点赞  收藏
 async function onArticleOperate(row,type){
    if (!token) {
      login.value.open()
      return false
    }
    let res=await articleOperateApi({
      article_id: row.id,
      type,
      tab:2
    })
    if(res.code==200){
      if(type==1){
        if (row.is_like == 1) {
          row.is_like = 0
          row.zan_number--
        } else {
          row.is_like = 1
          row.zan_number++
        }
      }

      if(type==2){
        if (row.is_collect == 1) {
          row.is_collect = 0
          row.collect_number--
        } else {
          row.is_collect = 1
          row.collect_number++
        }
      }
      type==1?row.taptype = 'is_like':row.taptype = ' '
      uni.$emit('update_num', row)
      uni.setStorageSync('socialDetail', row)
    }
    uni.showToast({
      title: res.message,
      icon: 'none',
    })
  }


  // 回复一级评论
  function toCommenta(row, index, str = '') {
    if (!token) {
      login.value.open()
      return false
    }
    articleCommentInputFocus(2, row)
    upRow.value = row
    upIndex = index
    child.value = ''
    childIndex = ''
  }
  // 回复二级评论
  function toCommentb(row, index, isChild, childIndex) {
    if (!token) {
      login.value.open()
      return false
    }
    articleCommentInputFocus(2, row)
    upRow.value = row
    upIndex = index
    child.value = isChild
    childIndex = childIndex
    if (!isChild) {
      // commentShow.value = true
    }
  }
  const islongPress = ref(false) //长按记录变量
  const longpressCommenta = (row, index, list) => {
    console.log(list)
    if (row.uid == userInfo.value.uid) {
      uni.showModal({
        title: '温馨提示',
        content: '您确定要删除此条评论吗？',
        showCancel: true,
        success: (res) => {
          if (res.confirm) {
            articleCommentDelApi({
              comment_id: row.id,
            }).then((result) => {
              if (result.code == 200) {
                list.splice(index, 1)
                uni.showToast({
                  title: result.message,
                  icon: 'none',
                })
              } else {
                uni.showToast({
                  title: result.msg,
                  icon: 'none',
                })
              }
            })
          }
        },
      })
    }
  }

  const touchendCommenta = () => { }
  const commentSuccess = ({ type, content, id }) => {
    console.log(userInfo.value)
    console.log(type, content)
    if (type == 1) {
      // 发表评论
      commentList.value.unshift({
        comment: content,
        create_times: '刚刚',
        avatar: userInfo.value.avatar,
        nickname: userInfo.value.name,
        show_btn: true,
        children: [],
        uid: userInfo.value.uid,
        app_user_tag: 'doctor',
        identity_status: userInfo.value.identity_status,
        is_like: 0,
        like_num: 0,
        province: system?.location?.province || '',
        id,
      })
      detail.value.comment_number++
      total.value++
      uni.setStorageSync('socialDetail', upRow.value)
      getHeight()
      uni.$emit('update_num', detail.value)
    } else {
      // 回复评论
      commentList.value[upIndex].children.unshift({
        comment: content,
        avatar: userInfo.value.avatar,
        create_times: '刚刚',
        to_nickname: upRow.value.nickname,
        nickname: userInfo.value.name,
        p_uid: upRow.value.uid,
        uid: userInfo.value.uid,
        comment_num: 0,
        show_btn: true,
        children: [],
        comment_id: upRow.value.id,
        // app_user_tag: userInfo.value.app_user_tag,
        identity_status: userInfo.value.identity_status,
        province: system?.location?.province || '',
        app_user_tag: 'doctor',
        is_like: 0,
        like_num: 0,
        id,
      })
      uni.$emit('update_num', detail.value)
    }
  }

  // 评论输入框组件
  const textareaCommentRef = ref()

  // 新建评论弹窗
  const showInputPop = ref(false)

  // 文章评论聚焦
  const articleCommentInputFocus = (type : number, e ?: CommentRootList) => {
    showInputPop.value = true
    nextTick(() => {
      textareaCommentRef.value && textareaCommentRef.value.inputFocus(type, e)
    })
  }

  // 关闭输入框
  const closeInputPop = () => {
    showInputPop.value = false
  }
  const RecommendLimit = ref(10) //推荐每页条数

  const showLoading = ref(false)
  const recommendList = ref([]) //推荐列表
  const equipment = ref('')
  const userStore = useMemberStore()
  const system = useSystemStore()
  const pageRecommend = ref(0)
  // 精选
  const getRecommend = () => {
    // #ifdef H5
    equipment.value = 'h5'
    // #endif
    let identity

    showLoading.value = true
    if (token) {
      // 登录后用返回的
      identity =
        userStore?.userInfo?.user?.identity_status || userStore?.casualUser?.identity_status || 0
    } else {
      // 没登录用存本地
      identity = userStore?.casualUser?.identity_status || 0
    }

    getHomeHotBottomListApi({
      imei: equipment.value || '',
      long: system.location.longitude || '',
      lat: system.location.latitude || '',
      identity_status: identity,
      type: 'kp',
      page: pageRecommend.value,
    }).then((res) => {
      if (res.data && Array.isArray(res.data)) {
        res.data.forEach((item) => {
          if (item?.content.length > 36) {
            item.content = item?.content.slice(0, 36)
            item.showAll = true
          }
        })
        recommendList.value = recommendList.value.concat(res.data)
      }
      showLoading.value = false
    })
  }
  function updateList(row, i, key) {
    recommendList.value[i][key] = recommendList.value[i][key] ? 0 : 1

    if (recommendList.value[i][key] == 0) {
      recommendList.value[i].zan_number--
    } else {
      recommendList.value[i].zan_number++
    }
  }

  function gotoDetail(row) {
    navigateTo(
      `${row.content_type == 'dt' ? '/socials/detail/index' : '/baby/science/index'}?&id=${row.id}`,
      0,
    )
  }

  async function deleteArticle(params, index) {
    console.log('删除文章', params.id)
    const res = await negativeFeedbackApi({
      id: params.id,
      type: params.content_type == 'dt' ? 1 : 2,
      tab: 1,
    })
    showToast(res.msg)
    if (res.code == 0) {
      recommendList.value.splice(index, 1)
    }
  }
  onReachBottom(() => {
    // pageRecommend.value++
    // getRecommend()
  })
</script>
<style>
  page {
    background: #fff;
  }
</style>
<style lang="scss" scoped>
  .comment_top {
    display: flex;
    padding: 30rpx 0 24rpx;
    background: #fff;
    align-items: center;

    .left {
      padding: 0 14rpx;
      font-weight: 700;
    }

    .userInfo {
      display: flex;
      align-items: center;
      flex: 1;

      .nickname {
        font-family: PingFang SC, PingFang SC;
        padding-left: 10rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #000000;
      }
    }

    .flw_btn {
      background: #00C1B9;
      border-radius: 60rpx 60rpx 60rpx 60rpx;
      font-size: 26rpx;
      color: #fff;
      line-height: 56rpx;
      margin-right: 30rpx;
      width: 110rpx;
      text-align: center;
    }

    .w_flw_btn {
      background: #ffffff;
      border-radius: 60rpx 60rpx 60rpx 60rpx;
      border: 1rpx solid #00C1B9;
      line-height: 43rpx;
      margin-right: 30rpx;
      font-size: 26rpx;
      color: #00C1B9;
      width: 125rpx;
      text-align: center;
    }
  }

  .con_list_btn_l_text {
    font-size: 28rpx;
    color: #333;
  }

  .uni-navbar__header-container {
    overflow: auto;
  }

  .header {
    overflow: hidden;
    padding: 10rpx 0;
    background: #fff;
    z-index: 1000000;
  }

  .head_img {
    width: 40rpx;
    height: 40rpx;
    float: left;
    margin: 16rpx 25rpx;
  }

  .head_cen {
    float: left;

    .head_cen_img {
      width: 72rpx;
      height: 72rpx;
      border-radius: 50%;
      float: left;
    }

    .head_cen_name {
      float: left;
      line-height: 72rpx;
      margin: 0 10rpx;
    }
  }

  .head_cen_guan {
    float: left;
    height: 40rpx;
    border: 1rpx solid #0074fc;
    line-height: 38rpx;
    border-radius: 20rpx;
    text-align: center;
    margin: 15rpx 0;
    padding: 0 15rpx;
    font-size: 26rpx;
  }

  .head_title {
    text-align: center;
    line-height: 72rpx;
    float: left;
    width: 550rpx;
  }

  .pages {
    padding: 0 30rpx 15rpx;
    box-sizing: border-box;

    .item_list {
      width: 690rpx;
      background: #ffffff;
      box-sizing: border-box;
      padding-bottom: 20rpx;
      border-bottom: 2rpx solid #e6e6e6;

      .time {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #aaa;
        // letter-spacing: 2px;
        padding-top: 15rpx;
      }

      .item_list_t {
        overflow: hidden;
        height: 112rpx;
        padding: 20rpx 0;

        .item_list_t_img {
          float: left;
          width: 72rpx;
          height: 72rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }

        .item_list_t_title {
          font-size: 28rpx;

          font-weight: 500;
          color: #999999;
          line-height: 72rpx;
          margin: 0 20rpx;
          float: left;
        }
      }

      .item_list_c {
        font-size: 28rpx;

        font-weight: 500;
        color: #333333;
        line-height: 1.5;
        padding-top: 25rpx;
      }

      .item_list_i {
        padding-top: 20rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .item_list_t_img {
          width: 207rpx;
          height: 186rpx;
          border-radius: 6rpx;
        }
      }
    }
  }

  .head_icon_img {
    width: 50rpx;
    height: 10rpx;
    margin: 30rpx;
    float: right;
  }

  .image-list {
    width: 100%;
    margin: 22rpx 0;

    .scroll-content {
      .ic-error {
        width: 100%;
        padding-left: 77rpx;
        font-size: 28rpx;
        display: flex;
      }
    }

    ::v-deep .u-transition {
      margin-right: 20rpx;
    }
  }

  .scroll-content {
    overflow: hidden;
    padding-top: 0;
  }

  .scroll-content_img {
    width: 216rpx;
    height: 198rpx;
    margin-right: 20rpx;
    margin-top: 20rpx;
    float: left;
  }

  .scroll-content_img:nth-of-type(3n) {
    margin-right: 0;
  }

  .scroll-content_img1:nth-of-type(2n) {
    margin-right: 100px;
  }

  .scroll-content_img1:nth-of-type(3n) {
    margin-right: 20rpx;
  }

  .comm_box {
    // min-height: 100vh;

    .all {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #202020;
      padding-top: 35rpx;
    }
  }

  .comment {
    width: 100%;
    padding-top: 24rpx;
    box-sizing: border-box;

    .comment_box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .comment_head {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
font-family: PingFangSC, PingFang SC;
        .comment_head_l {
          width: 62rpx;
          height: 62rpx;
          border-radius: 50%;
        }

        .comment_head_r {
          width: 610rpx;

          &.commentBorder {
            border-bottom: 1rpx solid #e6e6e6;
            // &:nth-last-child(1){
            //   border:none
            // }
          }

          .comment_nickname {
            display: flex;
            align-items: center;
          }

          .comment_head_r_name {
            font-size:30rpx;
            font-weight: 500;
            color: #333333;
            flex: 1;
            align-items: center;
          }

          .comment_ct_r_text {
            font-size: 28rpx;
            // font-weight: 500;
            color: #333333;
            line-height: 40rpx;
            margin-top: 10rpx;
            width: 504rpx;
          }

          .comment_ct_r_time {
            font-size: 22rpx;
            font-weight: 500;
            color: #999;
            line-height: 33rpx;
            padding-top: 5rpx;

            text {
              color: #333333;
              margin-left: 10rpx;
              font-size: 26rpx;
            }

            .address {
              color: #999;
              margin-right: 15rpx;
              font-size: 22rpx;
            }
          }
        }
      }
    }

    .comment_boxc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 15rpx 0 0 0;
      width: 100%;

      .comment_head {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 610rpx;

        .comment_head_l {
          width: 62rpx;
          height: 62rpx;
          border-radius: 50%;
        }

        .comment_head_r {
          width: 530rpx;

          .comment_head_r_name {
            font-size: 26rpx;

            color: #333333;
            // display: flex;
          }

          .comment_ct_r_text {
            font-size: 28rpx;

            color: #333333;
            line-height: 1.5;
          }

          .comment_ct_r_time {
            font-size: 22rpx;

            font-weight: 500;
            color: #999;
            line-height: 33rpx;

            text {
              color: #333333;
              margin-left: 10rpx;
            }
          }
        }
      }
    }

    .comment_box_zan {
      text-align: right;

      .comment_box_zan_img {
        width: 40rpx;
        height: 40rpx;
      }

      .comment_box_zan_num {
        font-weight: 500;
        font-size: 22rpx;
        color: #333333;
        text-align: center;
      }
      .icons{
        width:28rpx;
        height:28rpx;
        display:block;
      }
    }

    &:nth-last-child(2) {
      .comment_box .comment_head .comment_head_r.commentBorder {
        border: none;
      }
    }
  }

  .comment_boxc_more {
    font-weight: 400;
    font-size: 26rpx;
    color: #AAAAAA;
    text-align: center;
    padding-top: 20rpx;

    .empty_image {
      width: 240rpx;
      height: 220rpx;
      margin-top: 100rpx;
    }
  }

  .comment_boxc_more1 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #00C1B9;
    text-align: left;
    padding-left: 82rpx;
  }

  .all {
    font-size: 26rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 36rpx;
    padding: 20rpx 0;
  }

  .footerkong {
    padding: 26rpx 30rpx;
    height: 58rpx;
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
    box-sizing: content-box;
  }

  .footer {
    width: 100%;
    box-sizing: border-box;
    padding: 15rpx 25rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    padding-bottom: calc(30rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
    z-index: 999;

    .footer_input {
      width: 362rpx;
      height: 70rpx;
      line-height: 70rpx;
      background: #F5F6F8;
      border-radius: 70rpx;
      text-align: left;
      font-size: 26rpx;

      font-weight: 500;
      color: #999999;
      padding-left: 10rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
    }

    .footer_btn {
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items:center;
      image {
        width: 28rpx;
        height: 28rpx;
        display:block;
        margin-right:10rpx;
      }

      text {
        font-size: 26rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 58rpx;
      }
    }
  }

  .footera {
    width: 100%;
    box-sizing: border-box;
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    background: #fff;
    box-shadow: 0rpx -2rpx 7rpx 0rpx rgba(0, 0, 0, 0.09);
    box-sizing: border-box;

    .footer_input {
      width: 558rpx;
      height: 154rpx;
      border-radius: 18rpx;
      border: 1rpx solid #e6e6e6;
      font-size: 26rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      box-sizing: border-box;
      padding: 20rpx;
      background: #F5F6F8;
      border: none;
    }

    .send-btn {
      width: 111rpx;
      height: 50rpx;
      background: #00C1B9;
      border-radius: 36rpx;
      font-size: 28rpx;

      font-weight: 500;
      color: #ffffff;
      line-height: 50rpx;
      text-align: center;
      margin: 0;
    }
  }

  .fen_box_title {
    text-align: center;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 90rpx;
    height: 90rpx;
  }

  .fen_box {
    width: 100%;
    border-radius: 10rpx 10rpx 0 0;
    padding: 0 24rpx 24rpx;

    .fen_box_cen {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      padding-top: 20rpx;

      .fen_box_cen_l {
        text-align: center;
        width: 150rpx;
        margin: 0;
        line-height: 1;
        background-color: transparent !important;

        &::after {
          background: transparent !important;
        }

        .fen_box_cen_l_img {
          width: 100rpx !important;
          height: 100rpx !important;
          border-radius: 50%;
        }

        .fen_box_cen_l_te {
          font-size: 28rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 80rpx;
        }
      }

      .lh_box_cen_l {
        width: 216rpx;
        padding: 10rpx 0 15rpx;
        background: #ffffff;
        border-radius: 14rpx 14rpx 14rpx 14rpx;
        text-align: center;
        margin: 10rpx 20rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #333333;

        image {
          width: 75rpx;
          height: 75rpx;
          display: block;
          margin: 0 auto;
        }
      }
    }
  }

  .all_com_btn {
    width: 298rpx;
    height: 60rpx;
    border-radius: 42rpx 42rpx 42rpx 42rpx;
    border: 2rpx solid #00C1B9;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #00C1B9;
    line-height: 60rpx;
    text-align: center;
    margin: 30rpx auto 0;
  }

  .kepu_title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 30rpx;
    color: #333333;
    line-height: 35rpx;
    text-align: left;
    margin-bottom: 20rpx;
  }

  .jxcontent {
    padding: 30rpx 48rpx 0;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #000000;
    text-align: left;
    margin-bottom: 20rpx;
  }

  .user_tags {
    display: flex;
    align-items: center;

    text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 22rpx;
      color: #969696;
      margin-right: 10rpx;
    }

    image {
      width: 113rpx;
      height: 27rpx;
      display: block;
      margin-right: 10rpx;
    }
  }
</style>
